<template>
  <div id="child">
    <ul class="videoList">
      <li v-for="(item,index) in list"
          :key="index"
          @click="goMsg(item)">
        <div class="box">
          <h2>{{item.title}}</h2>
          <img :src="item.img"
               alt=""
               class="videoimg">
          <img src="static/listImg/Group.png"
               alt=""
               class="play">
        </div>
        <p>{{item.time}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        },
        {
          id: 0,
          title: 'Health-video',
          img: `static/listImg/video1.png`,
          time: '2023-05-12 19:47',
          src: `static/mp4/kouqiang.mp4`
        }
      ]
    }
  },
  methods: {
    goMsg (item) {
      if (this.$store.state.path === '/videoMsg') {
        this.$store.state.videoMsg = {}
        this.$router.push('/video')
      } else {
        this.$store.state.videoMsg = item
        this.$router.push('/videoMsg')
      }
    }
  }
}
</script>

<style scoped>
.videoList li {
  width: 95%;
  border-bottom: 1px solid #ccc;
  margin: auto;
  padding: 0 0 10px 0;
  /* background-color: red; */
}
.box {
  position: relative;
  width: 100%;
  height: 300px;
}
.box .videoimg {
  width: 100%;
  height: 100%;
}
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.box h2 {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 12px;
  color: #ffffff;
  font-weight: normal;
}
.videoList li p {
  font-size: 14px;
  padding: 10px 0;
  color: #666666;
}
</style>
